Current Selections

Current Selections Box. Returns the current app selections.#

Selections Gif

Usage#

import { CurrentSelections } from @motor-js/core

//...

<CurrentSelections />

Props#

Prop	Description	Options / Example
`size`	size of the selections box	`oneOf` 'tiny' 'small' 'medium' 'large' 'xlarge'
`width`	width of the selections box	`string` '100%'
`maxWidth`	max width of the selections box	`string` '100%'
`margin`	margin around the selections box	`string` '5px'
`maxHeight`	maximum height of the selections box	`string` '80px'
`minHeight`	minimum height of the selections box	`string` '80px'
`selectionsLimit`	Number of selections the object will display per dimension, before the values are grouped	`number` '3'
`overflow`	Set overflow property, either on the x-axis or y-axis	`oneOf` 'x-axis' 'y-axis'

Examples#

Simple Example#

function SelectionsTest() {
  return (
    <Motor config={config}>
      <CurrentSelections />
    </Motor>
  );
}

Change of Theme#

function SelectionsTest() {
  return (
    <Motor 
      config={config}
      theme={{
          selections: {
            color: {
              defaultFont: '#0000ff',
              fontTitle: '#ebebff',
              item: '#ebebff',
              clear: 'white',
              border: '#ebebff',
            },
            wrapper: {
              backgroundColor: '#ebebff',
              borderColor: '#ebebff',
            },
            item: {
              backgroundColor: '#0000ff',
            },
          }
      }}
    >
      <Filter 
        dimension={['Product Sub Group Desc']}
        label='Product Group'
      />
      <CurrentSelections size='large'/>
    </Motor>
  );
}

Theme API#

selections#

Settings in selections are below:

e.g. selections.color.defaultFont = 'brand'

Setting	Description	Options / Example
color	selections.color
`defaultFont`	default font color	`string`
`fontTitle`	font title color	`string`
`item`	selection item color	`string`
`clear`	clear icon color	`string`
`border`	border color	`string`
wrapper	selections.wrapper
`border`	wrapper border	`string`
`backgroundColor`	wrapper background color	`string`
`borderColor`	wrapper border color	`string`
`radius`	wrapper border radius	`string`
item	selections.item
`border`	item border	`string`
`backgroundColor`	item background color	`string`
`radius`	item border radius	`string`
`titleFontWeight`	item font weight	`string`